// 邀请成员

import React, { useState } from 'react';
import styles from './inviteMember.module.css';
import { message } from 'antd';
import qq from '../avatars/qq.png'
import wechat from '../avatars/wechat.png'
import weibo from '../avatars/weibo.png'
import tiktok from '../avatars/tiktok.png'
import logo3 from '../avatars/logo3.png'



export default function InviteMember() {
  const [inviteCode] = useState('ABSHHKH51232131');

  const handleCopy = () => {
    navigator.clipboard.writeText(inviteCode).then(() => {
      message.success('复制成功');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  return (
    <div className={styles.container}>
      <h2>邀请成员</h2>
      <p className={styles.description}>复制以下代码，并与您的朋友共享</p>

      <div className={styles.inviteSection}>
        <div className={styles.megaphoneIcon} style={{ width: '350px', height: '350px' }} >
          <img src={logo3} alt="邀请" style={{ width: '500px', height: '350px' }} />
        </div>

        <div className={styles.inviteBox}>
          <input
            type="text"
            value={inviteCode}
            readOnly
            className={styles.inviteInput}
          />
          <button onClick={handleCopy} className={styles.copyButton}>
            复制
          </button>
        </div>

        <p className={styles.shareText}>或通过以下方式分享</p>

        <div className={styles.socialLinks}>
          <button className={styles.socialButton}>
            <img src={wechat} alt="微信" />
          </button>
          <button className={styles.socialButton}>
            <img src={qq} alt="QQ" />
          </button>
          <button className={styles.socialButton}>
            <img src={weibo} alt="微博" />
          </button>
          <button className={styles.socialButton}>
            <img src={tiktok} alt="抖音" />
          </button>
        </div>
      </div>
    </div>
  );
}

